<template>
  <section :class="containerClass">
    <slot></slot>
  </section>
</template>

<script setup lang="ts">
import { computed, useSlots, type Component, type VNode } from 'vue';
import type { ContainerProps } from './types';

defineOptions({
  name:'RlContainer'
})
const props = defineProps<ContainerProps>()
const slots = useSlots()
// 判断布局方向是否为vertical
// 有两种情况，如果传入了direction参数，则根据传入的参数布局
// 若没有传入参数，子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal
const isVertical = computed(()=>{
  // 根据传入的参数判断
  if(props.direction === 'vertical'){
    return true
  }else if(props.direction === 'horizontal'){
    return false
  }
  // 根据子元素判断
  if(slots && slots.default){
    const vNodes: VNode[] = slots.default()
    return vNodes.some(vnode =>{
      const tag = (vnode.type as Component).name
      return tag === 'RlHeader' || tag === 'RlFooter'
    })
  }else{
    return false
  }
})

const containerClass = computed(()=>{
  return{
    'rl-container' : true,
    'rl-container-horizontal': !isVertical.value,
    'rl-container-vertical': isVertical.value
  }
})
</script>
